<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扫雷游戏</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: Arial, sans-serif;
        }
        #grid {
            display: grid;
            grid-template-columns: repeat(10, 40px);
            grid-gap: 2px;
        }
        .cell {
            width: 40px;
            height: 40px;
            background-color: #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 20px;
        }
        .revealed {
            background-color: #b0b0b0; /* 加深已揭示单元格的颜色 */
        }
        .mine {
            background-color: red;
        }
        .flag {
            background-color: rgb(227, 227, 43);
            color: black;
            font-size: 24px;
        }
        #score {
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h1>扫雷游戏</h1>
    <div id="score">得分: 0</div>
    <div>
        <button onclick="startGame()">开始</button>
        <button onclick="pauseGame()">暂停</button>
        <button onclick="restartGame()">重新开始</button>
    </div>
    <label for="difficulty">选择难度级别:</label>
    <select id="difficulty">
        <option value="easy">初级 (10x10, 10雷)</option>
        <option value="medium">中级 (15x15, 30雷)</option>
        <option value="hard">高级 (20x20, 100雷)</option>
    </select>
    <div id="grid"></div>

    <script>
        const difficultyLevels = {
            easy: { size: 10, mines: 10 },
            medium: { size: 15, mines: 30 },
            hard: { size: 20, mines: 100 }
        };

        let cells = [];
        let gameOver = false;
        let gameStarted = false;
        let score = 0;
        let currentDifficulty;

        function createGrid(size) {
            const grid = document.getElementById("grid");
            grid.innerHTML = '';
            grid.style.gridTemplateColumns = `repeat(${size}, 40px)`;
            cells = [];
            for (let row = 0; row < size; row++) {
                const cellRow = [];
                for (let col = 0; col < size; col++) {
                    const cell = document.createElement("div");
                    cell.classList.add("cell");
                    cell.dataset.row = row;
                    cell.dataset.col = col;
                    cell.addEventListener("click", revealCell);
                    cell.addEventListener("contextmenu", toggleFlag);
                    cellRow.push({ element: cell, isMine: false, isRevealed: false, adjacentMines: 0, isFlagged: false });
                    grid.appendChild(cell);
                }
                cells.push(cellRow);
            }
        }

        function startGame() {
            if (!gameStarted) {
                placeMines();
                calculateAdjacentMines();
                gameStarted = true;
                score = 0;
                updateScore();
            }
        }

        function pauseGame() {
            if (gameStarted) {
                gameStarted = false;
                alert("游戏已暂停。");
            }
        }

        function restartGame() {
            gameOver = false;
            gameStarted = false;
            score = 0;
            updateScore();
            createGrid(currentDifficulty.size);
            startGame();
        }

        function placeMines() {
            let placedMines = 0;
            while (placedMines < currentDifficulty.mines) {
                const row = Math.floor(Math.random() * currentDifficulty.size);
                const col = Math.floor(Math.random() * currentDifficulty.size);
                if (!cells[row][col].isMine) {
                    cells[row][col].isMine = true;
                    placedMines++;
                }
            }
        }

        function calculateAdjacentMines() {
            for (let row = 0; row < currentDifficulty.size; row++) {
                for (let col = 0; col < currentDifficulty.size; col++) {
                    if (!cells[row][col].isMine) {
                        let mineCount = 0;
                        for (let r = row - 1; r <= row + 1; r++) {
                            for (let c = col - 1; c <= col + 1; c++) {
                                if (r >= 0 && r < currentDifficulty.size && c >= 0 && c < currentDifficulty.size && cells[r][c].isMine) {
                                    mineCount++;
                                }
                            }
                        }
                        cells[row][col].adjacentMines = mineCount;
                    }
                }
            }
        }

        function revealCell(event) {
            const cellElement = event.target;
            const row = parseInt(cellElement.dataset.row);
            const col = parseInt(cellElement.dataset.col);
            if (gameOver || !gameStarted) return;

            const cell = cells[row][col];
            if (cell.isRevealed || cell.isFlagged) return;

            cell.isRevealed = true;
            cellElement.classList.add("revealed");

            if (cell.isMine) {
                cellElement.classList.add("mine");
                revealAllMines();
                alert("游戏结束，此位置存在地雷");
                gameOver = true;
            } else {
                if (cell.adjacentMines > 0) {
                    cellElement.textContent = cell.adjacentMines;
                } else {
                    for (let r = row - 1; r <= row + 1; r++) {
                        for (let c = col - 1; c <= col + 1; c++) {
                            if (r >= 0 && r < currentDifficulty.size && c >= 0 && c < currentDifficulty.size) {
                                revealCell({ target: cells[r][c].element });
                            }
                        }
                    }
                }
                score++;
                updateScore();
                checkVictory();
            }
        }

        function toggleFlag(event) {
            event.preventDefault(); // 阻止右键菜单
            const cellElement = event.target;
            const row = parseInt(cellElement.dataset.row);
            const col = parseInt(cellElement.dataset.col);
            const cell = cells[row][col];
            if (cell.isRevealed) return;

            cell.isFlagged = !cell.isFlagged;
            cell.element.classList.toggle("flag", cell.isFlagged);
            cell.element.textContent = cell.isFlagged ? "🚩" : ""; // 标记为旗帜
        }

        function revealAllMines() {
            for (let row = 0; row < currentDifficulty.size; row++) {
                for (let col = 0; col < currentDifficulty.size; col++) {
                    if (cells[row][col].isMine) {
                        cells[row][col].element.classList.add("mine");
                    }
                }
            }
        }

        function checkVictory() {
            let revealedCells = 0;
            for (let row = 0; row < currentDifficulty.size; row++) {
                for (let col = 0; col < currentDifficulty.size; col++) {
                    if (cells[row][col].isRevealed && !cells[row][col].isMine) {
                        revealedCells++;
                    }
                }
            }
            if (revealedCells === (currentDifficulty.size * currentDifficulty.size - currentDifficulty.mines)) {
                alert("恭喜你，游戏胜利了！");
                gameOver = true;
            }
        }

        function updateScore() {
            document.getElementById("score").textContent = "得分: " + score;
        }

        document.getElementById('difficulty').addEventListener('change', function() {
            const selectedDifficulty = difficultyLevels[this.value];
            currentDifficulty = selectedDifficulty;
            restartGame(); // 重置游戏到新难度级别
        });

        // 初始化游戏网格和难度级别选择
        currentDifficulty = difficultyLevels.easy;
        createGrid(currentDifficulty.size);
    </script>
</body>
</html>